<template>
    <el-container>
        <el-aside width="75%">
            <img
                src="../../../../resources/assets/login/welcome-bg.jpg"
                style="width:762px;height:452px"
            />
        </el-aside>
        <el-main>
              <div>
                <drawer :display.sync="display" :width="drawerWidth" :height="drawerHeight">
                    <div>
                        <div style="float:left;padding-right:15px">
                            <img src="static/icon/对号.png" />
                        </div>
                        <div>
                            <p style="padding-bottom:5px">欢迎</p>
                            <p>欢迎回来</p>
                        </div>
                    </div>
                   
                </drawer>
            </div>
            <!--
            <el-table 
                ref="tableCot"
                :data="tableData" 
                style="width=100%"
                :height="height"
                :show-header="false">
                <el-table-column prop="username" label="姓名" >
                    <template slot-scope="scope">
                        {{scope.row.username}}  刚刚下载了  {{scope.row.file_name}}
                    </template>
                </el-table-column>
                <el-table-column prop="file_name" label="下载成果物文件">
                </el-table-column> 
                <div slot="empty">
                    <p ><span>今日暂无人员下载</span></p>
                </div>
            </el-table> -->
        
        </el-main>

          
    </el-container>

    
</template>

<script>
import urlConfig from "../../../config/url.json";
import Vue from "vue";
import { Message } from "element-ui";
import drawer from './welcomeback.vue'
Vue.component(Message.name, Message);
let queryDownloadUrl = urlConfig.queryDownload;
export default {
    data() {
        return {
            tableData: [],
            height: window.innerHeight - 159,
            display: true,
            drawerWidth: '175px',
            drawerHeight:'72px'
        };
    },
    components: {
        drawer
    },
    methods: {
        queryList() {
            //查询下载记录表
            debugger;
            let that = this;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
            });
            that.$http({
                method: "post",
                url: queryDownloadUrl,
                baseURL: "/api",
            })
                .then(function (response) {
                    if (response.data.code == 1) {
                        that.tableData = response.data.data;
                        Message.success("查询成功");
                    } else {
                        Message.error("查询失败");
                    }
                    loading.close();
                })
                .catch(function (err) {
                    console.log(err);
                    Message.error("查询失败");
                    loading.close();
                });
        },
          //Table高度
        getHeight() {
            let that = this;
            that.height = window.innerHeight - 159;
        },
        //欢迎窗口
        welcome() {
            let that = this;
            setTimeout(() => {
                that.display = false
            }, 3000);
        }
    },
    mounted() {
        let that = this;
        // that.queryList();
         debugger
        // 拿到表格挂载后的真实DOM
        // const table = this.$refs.tableCot
        // // 拿到表格中承载数据的div元素
        // const divData = table.bodyWrapper
        // // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        // setInterval(() => {
        //     // 元素自增距离顶部1像素
        //     divData.scrollTop += 1
        //     // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        //     if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
        //         // 重置table距离顶部距离
        //         divData.scrollTop = 0
        //     }
        // }, 100)
        that.welcome();
    },
    //自适应高度
    created() {
        let that = this;
        window.addEventListener("resize", that.getHeight);
    },
    destroyed() {
        let that = this;
        window.removeEventListener("resize", that.getHeight);
    },
  
};
</script>

<style scoped>
.back {
    background-image: url("../../../../resources/assets/login/welcome-bg.jpg");
}
.welcomeBg {
    position: absolute;
    /*height: 100%;*/
    /*width: 100%;*/
    /*position: relative;*/
    top: 60px;
    bottom: 0;
    left: 200px;
    right: 0;
    overflow: hidden;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
    width: 0;
}
</style>